<template>
    <div>
       <div class="container ">
          <h2>课次数统计</h2>
          <el-divider></el-divider>
          <el-form class="form-demo">
             <el-form-item label="统计时段">
                <el-radio-group v-model="form.time">
                   <el-radio value="month">月</el-radio>
                   <el-radio value="season">季</el-radio>
                   <el-radio value="year">年</el-radio>
                </el-radio-group>
             </el-form-item>
             <el-form-item label="查找年份" v-if="form.time != 'year'">
                <el-select v-model="form.year" placeholder="选择年份" placement="top-start">
                   <el-option v-for="year in yearRange" :key="year" :label="year" :value="year" />
                </el-select>
             </el-form-item>
             <el-row v-else>
                <el-col :span="12">
                   <el-form-item label="开始年份">
                      <el-select v-model="form.startYear" placeholder="选择年份">
                         <el-option v-for="year in yearRange" :key="year" :label="year" :value="year">
                         </el-option>
                      </el-select>
                   </el-form-item>
                </el-col>
                <el-col :span="12">
                   <el-form-item label="结束年份">
                      <el-select v-model="form.endYear" placeholder="选择年份">
                         <el-option v-for="year in yearRange" :key="year" :label="year" :value="year"
                            :disabled="year < form.startYear">
                         </el-option>
                      </el-select>
                   </el-form-item>
                </el-col>
             </el-row>
 
 
             <el-form-item>
                <el-button type="primary" @click="bindConfirm">统计</el-button>
                <el-button @click="cancel">取消</el-button>
             </el-form-item>
          </el-form>
       </div>
       <div ref="chartDom" style="height: 400px; margin-top: 20px;" class="mt20"></div>
 
 
    </div>
 </template>
 
 <script setup>
 import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue'
 import { Refresh } from '@element-plus/icons-vue'
 import { statisticsClassCount, useYear } from '@/api/statistic'
 import * as echarts from 'echarts'
 const form = reactive({
    time: 'month',
    year: '2021',
    startYear: '2021',
    endYear: '2024'
 })
 //动态生成年份
 const { yearRange } = useYear()
 // 绘制统计图
 const chartDom = ref(null)
 //绘制课程统计
 let chartInstance = ref(null)
 const option = reactive({
    // 这里是ECharts的配置项，可以根据需要绘制不同类型的图表
    title: {
       text: ''
    },
    tooltip: {},
    legend: {
       data: ['收费']
    },
    xAxis: {
       name: "月",
       data: []  //["1月","2月","3月","4月","5月","6月"]
    },
    yAxis: {
       name: "收费金额"
    },
    series: [{
       name: '收费',
       type: 'bar',
       data: []    //[5, 20, 36, 10, 10, 20]
    }, {
       name: '收费',
       type: 'line',
       data: []     //data: [5, 20, 36, 10, 10, 20]
    }
    ]
 })
 onMounted(async () => {
    await nextTick(); // 确保DOM已经渲染完成
    chartInstance = echarts.init(chartDom.value);
 })
 // 销毁ECharts实例
 onUnmounted(() => {
    if (chartInstance != null && chartInstance.dispose) {
       chartInstance.dispose();
    }
 })
 const bindConfirm = () => {
    // if (chartInstance == null || chartInstance.dispose) {
    //    chartInstance = echarts.init(chartDom.value)
    // }
    //展示统计的列表
    //按照年月分配
    statisticsClassCount(form).then(res => {
       console.log(res)
       const info = res.data.data
       option.title.text = info.title;
       option.xAxis.data = info.time;
       option.xAxis.name = info.xname;
       option.series[0].data = info.data;
       option.series[1].data = info.data;
       chartInstance.setOption(option)
    })
 }
 //取消按钮
 const cancel = () => {
    form.year = "2021"
    form.time = "month"
    chartInstance.dispose()
 }
 </script >
 <style lang="less" scoped>
 .form-demo {
    width: 70%;
    padding-left: 10%;
 }
 
 .form-demo .el-select {
    width: 200px;
 }
 </style>
 